% from bottle import request

% import lonote.translate
% g = lonote.translate.get_gettext_func()
<html>
    <head>
        <meta charset="utf-8" />
        <title>{{!g('LoNote Personal Notebook')}}</title>

        <script src="/static/js/jquery-1.9.1.js"></script>
        <script src="/static/js/jquery-ui-1.10.2.custom.min.js"></script>

        <script src="/static/js/URI.js"></script>
        <script src="/static/js/shortcut.js"></script>
        <script src="/static/js/lonote.js"></script>

        <link rel="stylesheet" href="/static/css/jqueryui-default/jquery-ui-1.10.2.custom.min.css" />

        <link rel="stylesheet" href="/static/css/default.css" type="text/css" />

        <style>
            #start_content {
                padding: 15px;
                background-color: #FFF;
            }
        </style>
    </head>
    
    <body>
        <div id="content_column">
            <header>
                <h1 class="note_title">{{!g('Let\'s LoNote!')}}</h1>
            </header>

            <article id="start_content">
                <table>
                    <tr>
                        <td>
                            <img src="/static/lo/lo_1_happy_1.png" style="float: left;" />
                        </td>
                        <td>
                            <p><br/></p>
                            <p>{{!g('Hi you! My name is <b>Lolita</b>.')}}</p>
                            <p>{{!g('This is LoNote - a personal note-taking software version 2. Just take it! Glad to see you! I will help you to manage your notes.')}}</p>
                            <p>{{!g('By the way, The human whose name is written in this notebook shall become a loli... ha, just kidding!')}}</p>
                            <p>{{!g('Anyway! Let\'s LoNote for fun!')}}</p>
                        </td>
                    </tr>
                </table>
                <p><br/></p>

                <h2>{{!g('Supported Browser')}}</h2>
                <h3>{{!g('Designed for...')}}</h3>
                <ul>
                    <li>Firefox 17+</li>
                    <li>Google Chrome / Chromium 23+</li>
                </ul>
                <h3>{{!g('Partial Work')}}</h3>
                <ul>
                    <li>Epiphany (Gnome Web) 3.6</li>
                    <ul>
                        <li>No autosave when page closing.</li>
                        <li>Some hotkey conflict like F10.</li>
                    </ul>
                    <li>Midori 0.4.7</li>
                    <ul>
                        <li>No autosave when page closing.</li>
                    </ul>
                </ul>
                <p><br/></p>

                <hr/>
                <p><br/></p>

                <h2>{{!g('How to Start?')}}</h2>
                <p>{{!g('Use your mouse to touch the <b>sidebar panel (↖)</b> first!')}}</p>
                <p>{{!g('New user should go to <b>Configure</b> page and create your first notebook.')}}</p>
                <p><br/></p>

                <h2>{{!g('For LoNote 1.X User')}}</h2>
                <p>{{!g('You can use the command-line interface to convert your (old) notebook to a new one.')}}</p>
                <p><br/></p>

                <p>{{!g('For Example (Linux):')}}</p>
                <blockquote>
                    <pre style="overflow: auto;">lonote.py --convert ORIGINAL_NOTEBOOK_DIR</pre>
                    <pre style="overflow: auto;">lonote.py --convert ORIGINAL_NOTEBOOK_DIR --convert-keep-history</pre>
                </blockquote>
                <p>{{!g('On Windows Platform:')}}</p>
                <blockquote>
                    <pre style="overflow: auto;">py lonote.py --convert ORIGINAL_NOTEBOOK_DIR --convert-keep-history</pre>
                </blockquote>
                <p><br/></p>

                <p>{{!g('Hint: On windows platform, "lonote.exe" didn\'t support command-line interface. So <em>use <strong>SOURCE PACKAGE</strong> (lonote.py) to convert it!</em>')}}</p>
                <p><br/></p>

            </article>

            <!-- footer -->
            <footer>{{g(' - Designed by Civa Laboratory - ')}}</footer>

        <div id="content_column">

        <script>
            $(document).ready(function(){
                lo.key.search_ready();
            });
        </script>

        <!-- 載入 sidebar -->
        {{!sidebar}}
        <!--
        <script>
            function sidebar_load(){
                function get_success(data){
                    $('body').append(data);
                };
                var sidebar_loc = '/sidebar';
                $.get(sidebar_loc, get_success);
            };
            $(window).one('load', sidebar_load);
        </script>
        -->

    </body>
</html>
